<!--
	@create by 
	@update by 
	@description 
-->
<div v-bind:style="{height: height + 'px'}" style="{overflow: hidden; max-width: 100%; min-width: 100%;}">
    <div class="subheader editor-toolbar" id="editor-header">
	    <div class="btn-group">
	        <div class="btn-toolbar pull-left">
	            <button v-for="(item, index) in toolBarItems"
	                    :id="item.id"
	                    :title="item.title"
	                    class="btn btn-inverse" v-bind:class="{'separator': item.type == 'separator'}"
	                    :disabled="item.type == 'separator' || item.enabled == false"
	                    @click="toolbarButtonClicked(index)">
	                <i v-if="item.type == 'button'" v-bind:class="item.cssClass" class="toolbar-button" data-toggle="tooltip" :title="item.title"></i>
	                <div v-if="item.type == 'separator'" v-bind:class="item.cssClass"></div>
	            </button>
	          </div>
	        </div>
	  </div>
	  <div class="full" style="position: fixed;">
	   <div class="row row-no-gutter">
	        <div id="canvasHelpWrapper" class="col-xs-9">
	            <div id="canvasSection" class="canvas-wrapper" 
	                    v-jq-droppable="droppableOptions">
	                    <div class="canvas-message" id="model-modified-date"></div>
	                    <div class="Oryx_button" 
	                         id="delete-button" 
	                         :title="deleteTitle"
	                         @click="deleteShapeFn"
	                         style="display:none">
	                        <img src="libs/editor/images/delete.png"/>
	                    </div>
	                    <div class="Oryx_button" 
	                         id="morph-button"
	                         :title="morphTitle"
	                         @click="morphShapeFn"
	                         style="display:none">
	                        <img src="libs/editor/images/wrench.png"/>
	                    </div>
	                    <div class="Oryx_button"
	                         v-for="item in quickMenuItems"
	                         :id="item.id"
	                         :title="item.description"
	                         @click="quickAddItem(item.id)"
	                         ref="draggedElement"
	                         v-jq-draggable="draggableOptions"
	                         style="display:none">
	                         <img :src="'libs/editor/stencilsets/bpmn2.0/icons/' + item.icon"/>
	                     </div>
	            </div>
	        </div>
	        <div id="propertiesHelpWrapper" class="col-xs-9">
	           <!-- <div class="propertySection" id="propertySection"
	                    ng-class="{collapsed: propertyWindowState.collapsed}">
	                    <div class="selected-item-section">
	                        <div class="clearfix">
	                            <div class="pull-right" ng-if="selectedItem.auditData.createDate">
	                                <strong>{{'ELEMENT.DATE_CREATED' | translate}}: </strong> {{selectedItem.auditData.createDate}}
	                            </div>
	                            <div class="pull-right" ng-if="selectedItem.auditData.author">
	                                <strong>{{'ELEMENT.AUTHOR' | translate}}: </strong> {{selectedItem.auditData.author}}
	                            </div>
	                            <div class="selected-item-title">
	                                <a ng-click="propertyWindowState.toggle()"> 
	                                    <i class="glyphicon" ng-class="{'glyphicon-chevron-right': propertyWindowState.collapsed, 'glyphicon-chevron-down': !propertyWindowState.collapsed}"></i>
	                                    <span ng-show="selectedItem.title != undefined && selectedItem.title != null && selectedItem.title.length > 0">{{selectedItem.title}}</span> 
	                                    <span ng-show="!selectedItem || selectedItem.title == undefined || selectedItem.title == null || selectedItem.title.length == 0">{{modelData.name}}</span>
	                                </a>
	                            </div>
	                        </div>
	                        <div class="selected-item-body">
	                            <div>
	                                 <div class="property-row" ng-repeat="property in selectedItem.properties"
	                                    ng-click="propertyClicked($index)" ng-class="{'clear' : $index%2 == 0}">
	                                    <span class="title" ng-if="!property.hidden" title="{{ property.description | translate }}">{{ property.title | translate }}&nbsp;:</span>
	                                    <span class="title-removed" ng-if="property.hidden"><i>{{ property.title | translate }}&nbsp;({{'PROPERTY.REMOVED' | translate}})&nbsp;:</i></span>
	                                    <span class="value"> 
	                                        <ng-include
	                                            src="getPropertyTemplateUrl($index)" ng-if="!property.hasReadWriteMode"></ng-include>
	                                        <ng-include src="getPropertyReadModeTemplateUrl($index)"
	                                            ng-if="property.hasReadWriteMode && property.mode == 'read'"></ng-include>
	                                        <ng-include src="getPropertyWriteModeTemplateUrl($index)"
	                                            ng-if="property.hasReadWriteMode && property.mode == 'write'"></ng-include>
	                                    </span>
	                                </div>
	                            </div>
	                        </div>
	                    </div>     
	                </div>   -->
	        </div>
	        
	   </div>
	</div>
</div>
